<template>
  <!-- 授权查看人 -->
  <el-dialog
    v-model="props.modelValue"
    width="800px"
    :show-close="false"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4
          :id="titleId"
          :class="titleClass"
        >
          {{ t('userCenter.b11') }}
        </h4>
        <img
          src="@/assets/img/icon_guanbi.png"
          @click="close"
          class="close"
        />
      </div>
    </template>

    <div class="checkList flexcc-col mt-2">
      <div
        class=""
        v-for="item in personList"
      >
        <el-checkbox
          v-model="item.checked"
          @change="changeChecked(item)"
        >
          <div style="width: 150px">{{ item.userName }} {{ item.customerRoleName }}</div>
        </el-checkbox>
        <el-checkbox
          v-if="isCanEdit"
          v-model="item.canEdit"
          :disabled="item.disabledCanEdit"
        >
          {{ t('userCenter.dc2') }}
        </el-checkbox>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer flexcc">
        <el-button
          color="#252628"
          plain
          @click="cancel"
        >
          {{ t('cancelText') }}
        </el-button>
        <el-button
          type="primary"
          color="#252628"
          @click="confirm"
        >
          {{ t('confirmText') }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { onBeforeMount, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import useLogin from '@/stores/login'
import { customerListApi, dealResponsiblePersonApi, queryCooperstionApi } from '@/service/common'

const storeuser = useLogin()

onBeforeMount(() => {
  init()
})

const { t, locale } = useI18n()

const router = useRouter()
const route = useRoute()

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  objId: {
    type: Number,
    required: true
  },
  objTable: {
    type: String,
    required: true
  },
  // 显示[允许编辑]列
  isCanEdit: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue'])

const handleClose = () => {
  emit('update:modelValue')
}

// 取消
const cancel = () => {
  handleClose()
}

// 确定
const confirm = () => {
  const list = personList.value.filter((item) => item.checked)
  const params = list.length
    ? list.map((item) => {
        return {
          objId: props.objId,
          objTable: props.objTable,
          cooperationId: item.id,
          canEdit: item.canEdit ? '1' : '0'
        }
      })
    : [{ objId: props.objId, objTable: props.objTable }]

  dealResponsiblePersonApi(params).then(({ msg }) => {
    ElMessage.success(msg)
    handleClose()
  })
}

// 人员列表
const personList = ref([])
const getPerconList = async () => {
  await customerListApi({
    enterpriseId: storeuser.userInfo.enterpriseId
  }).then(({ rows }) => {
    personList.value = rows.filter((item) => {
      item.disabledCanEdit = true
      return item.id !== storeuser.userInfo.id
    })
  })
}

// 勾选时
const changeChecked = (item) => {
  if (item.checked) {
    item.disabledCanEdit = false
  } else {
    item.disabledCanEdit = true
    item.canEdit = false
  }
}

// 勾选的人员列表 回显
const getCooperstion = () => {
  queryCooperstionApi({
    objId: props.objId,
    objTable: props.objTable
  }).then(({ data }) => {
    data.forEach((d) => {
      personList.value.forEach((item) => {
        if (item.id === d.cooperationId) {
          item.checked = true
          item.canEdit = d.canEdit === '1'
          item.disabledCanEdit = false // 禁止勾选
        } else {
          item.disabledCanEdit = true
        }
      })
    })
  })
}

//
const init = async () => {
  await getPerconList()
  getCooperstion()
}
</script>

<style scoped lang="scss"></style>
